<!-- 该Button改装自ElButton，实现目的为点击后按钮变成加载中的状态，防止多次点击 -->
<template>
  <button :disabled="disabled" class="el-button"
          @click="handleClick"
          :autofocus="autofocus"
          :type="nativeType"
          :class="[
      type ? 'el-button--' + type : '',
      size ? 'el-button--' + size : '',
      {
        'is-disabled': disabled,
        'is-loading': loading,
        'is-plain': plain
      }
    ]"
  >
    <i class="el-icon-loading" v-if="loading"></i>
    <i :class="'el-icon-' + icon" v-if="icon && !loading"></i>
    <span v-if="$slots.default"><slot></slot></span>
  </button>
</template>
<script>
export default {
  name: 'CButton',
  data () {
    return {
      loading: false
    }
  },
  props: {
    type: {
      type: String,
      default: 'default'
    },
    size: String,
    icon: {
      type: String,
      default: ''
    },
    nativeType: {
      type: String,
      default: 'button'
    },
    disabled: Boolean,
    plain: Boolean,
    autofocus: Boolean
  },

  methods: {
    handleClick (evt) {
      this.loading = true
      this.$emit('click', this, evt)
    },
    isLoading (loading) {
      this.loading = loading
    }
  }
}
</script>
